<template>
  <div id="main"></div>
</template>

<script>
// import echarts from "echarts";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import { getJson } from "../../../api/public.js";
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    // getJson().then(res => {
    // this.$nextTick(() => {
    //   this.initChart()
    let chanyenenghao = echarsData.chanyenenghao;
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "产业能耗",

        textStyle: {
          //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          color: "#fff",
          fontSize: 16,
        },
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
        left: "center",
        align: "right",
      },

      color: [
        "#5ad8a6",
        "#f6bd16",
      //"#e8684a",
        "#5470c6",
        "#87ba76",
        "#fac858",
        //"#ea7c71",
        "#f1ab60",
        "#1ab8c2",
        "#418dd3",
      ],
      tooltip: {
        trigger: "item",

        formatter: function (params) {
          // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
          let firstParams = params.data;

          return (
            firstParams.name +
            "<br/> 能耗:" +
            firstParams.value +
            "吨标煤<br/>占比:" +
            firstParams.rate
          );
        },
      },
      legend: {
        textStyle: {
          fontSize: 14, //字体大小
          color: "#fff", //字体颜色
        },
        orient: "vertical",
        left: "center",
        bottom: "bottom",
      },
           grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      series: [
        {
          name: "能耗",
          type: "pie",
          radius: "60%",
          labelLine: {
            length: 30,
          },
          label: {
            // formatter: '{a|{a}}{abg|} {c},占比 {per|{d}%}  ',
            formatter: "{c}吨标煤，{per|{d}%}  ",
            //backgroundColor: '#F6F8FC',
            //borderColor: '#8C8D8E',
            //borderWidth: 1,
            color: "#fff",
            borderRadius: 20,
            // rotate:130,
            // position: "inner",
            labelLine: {
              show: false,
            },
            rich: {
              a: {
                color: "#fff",
                lineHeight: 22,
                align: "center",
              },

              b: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
                lineHeight: 33,
              },
              per: {
                color: "#fff",
                //backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: chanyenenghao.series,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);

    // });
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },

        calculable: true,
           color:['#5ad8a6', '#f6bd16', '#e8684a', '#5470c6', '#87ba76', '#fac858', '#ea7c71', '#f1ab60', '#1ab8c2','#418dd3'],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 150],
            center: ["50%", "70%"],
            roseType: "area",
            data: [
              { value: 40, name: "股票期权" },
              { value: 15, name: "限制性股票" },
              { value: 25, name: "限制性股票单位" },
              { value: 25, name: "股票增值权" },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style >
/* #main {
  height: 90%;
} */
</style>
